<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>欢迎页</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/bootstrap.min.css">
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
    <!--<script type="text/javascript" src="${request.contextPath}/statics/libs/echarts/echarts.all.js"></script>-->
</head>
<body>
<div id="rrapp" v-cloak>
    <div v-show="showList">
        <div class="grid-btn">
            <div class="form-group col-sm-2">
                <input id="twoBarCode" type="text" class="form-control" v-model="q.twoBarCode" @keyup.enter="query" placeholder="年月">
            </div>
            <a class="btn btn-default" @click="query">查询</a>
</div>
<div class="panel panel-default">
    <div style="padding: 10px 0 20px 10px;">

        <!--<div id="chartmain3" style="width:800px; height: 400px;"></div>-->
        <!--<div id="chartmain" style="width:600px; height: 400px;"></div>-->

        <div id="chartmain2" style="width:600px; height: 400px;"></div>

    </div>
</div>

<!--<script src="${request.contextPath}/statics/libs/echarts/echarts.js"></script>-->


<script type="text/javascript">
        //指定图标的配置和数据
        var option = {
            title:{
                text:'2019年4月每日善款统计'
            },
            tooltip:{},
            legend:{
                data:['用户来源']
            },
            xAxis:{
                data:["1日","2日","3日","4日","5日","6日","7日","8日","9日","10日","11日","12日","13日","14日","15日","16日","17日","18日","19日","20日","21日","22日","23日","24日","25日","26日","27日","28日","29日","30日"]
            },
            yAxis:{

            },
            series:[{
                name:'访问量',
                type:'line',
                lineStyle:{
                  normal:{
                    color: "#0097E9",
                    width: 3,
                  }

                },
                data:[500,300,860,750,900,200,360,100,800,1200,1100]
            }]
        };


       var option2 = {
    title : {
        text: '2019年每月善款统计'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['善款统计']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'善款金额',
            type:'bar',
            data:[200, 490, 700, 232, 256, 767, 1356, 1622, 336, 200, 694, 633],

            itemStyle:{
                normal:{
                    color:'#0097E9'
                }
            }

            <!--markPoint : {-->
                <!--data : [-->
                    <!--{type : 'max', name: '最大值'},-->
                    <!--{type : 'min', name: '最小值'}-->
                <!--]-->
            <!--},-->
            <!--markLine : {-->
                <!--data : [-->
                    <!--{type : 'average', name: '平均值'}-->
                <!--]-->
            <!--}-->
        }
    ]
};





var option3 = {
    title : {
        text: '2019年4月善款分类统计',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient : 'vertical',
        x : 'left',
        data:['供灯','功德箱','法会','福满屏']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel'],
                option: {
                    funnel: {
                        x: '25%',
                        width: '50%',
                        funnelAlign: 'left',
                        max: 1548
                    }
                }
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'访问来源',
            type:'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'供灯'},
                {value:310, name:'功德箱'},
                {value:234, name:'法会'},
                {value:135, name:'福满屏'},
            ]
        }
    ]
};




        <!--//初始化echarts实例-->
        <!--var myChart = echarts.init(document.getElementById('chartmain'));-->
         var myChart2 = echarts.init(document.getElementById('chartmain2'));


      <!--var myChart3 = echarts.init(document.getElementById('chartmain3'));-->
        <!--//使用制定的配置项和数据显示图表-->
        <!--myChart.setOption(option2);-->

        myChart2.setOption(option3);
         <!--myChart3.setOption(option);-->
</script>

</body>
</html>